Skip to content

Conversation

@moibra05
Copy link
Contributor

Because

  • Some text (particularily boolean fields) wasn't visible in dark mode in any codemirror sections

This commit

  • Improves the visibility of the text in dark mode

Fixes #13594

@moibra05
Copy link
Contributor Author

image image

Copy link
Contributor

@yashikakhurana yashikakhurana left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @moibra05 this is much readable now, we have codemirror on other pages too we want to make sure we add at all the places like summary page

Copy link
Collaborator

@jaredlockhart jaredlockhart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we just use some of the out of the box themes that specifically are for light/dark modes like

Image Image

?

@moibra05
Copy link
Contributor Author

Can't we just use some of the out of the box themes that specifically are for light/dark modes like
Image Image

?

I don't believe there are any default themes included in the core cm6 library but it is possible to install and integrate third party ones

@jaredlockhart
Copy link
Collaborator

Yeah I'm just curious if that's a cleaner solution than managing the colours explicitly? @moibra05 @yashikakhurana what do you think?

@moibra05
Copy link
Contributor Author

moibra05 commented Sep 26, 2025

Incorporating themes would be a more robust solution but based on some research i did, it looks like having it dynamically switch between dark/light modes would add a bit of complexity

Copy link
Collaborator

@jaredlockhart jaredlockhart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay well better to go with the simple solution first to get something out the door and then we if we want/need to we can spend more time on a broader solution later. Thnx for hopping on this quick 🙏

Comment on lines -16 to +55
basicSetup,
lineNumbers(),
drawSelection(),
highlightSpecialChars(),
foldGutter(),
autocompletion(),
bracketMatching(),
closeBrackets(),
highlightSelectionMatches(),
indentOnInput(),
highlightActiveLine(),
syntaxHighlighting(highlightStyle),
syntaxHighlighting(defaultHighlightStyle),
history(),
search(),
keymap.of([...defaultKeymap, ...searchKeymap, ...historyKeymap]),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah this is a bit hairy. If using dedicated light/dark themes is too complicated let's just go back to your original approach of just overriding the colour of the bools. Simplest, smallest solution is usually best 🙏

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The approach i have here is only changing the colour of the boolean text. basicSetup packages all of these extensions without any option to exclude specific ones, which is an issue because this included extension prevents me from setting a custom HighlightStyle that overrides boolean text colour. Annoyingly, the only way to fix this is to manually include all the extensions except defaultHighlightStyle

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Boolean variables in configs are difficult to see in dark mode

4 participants